<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<style>
    #eyeInfo {
        display: float;
        float: left;
    }

    .barSpan {
        float: right;
        width: 80%;
    }

    .tab {
        margin-bottom: 0px;
        margin-top: 6px;
    }

    .tab > li > a {
        line-height: 22px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

    .tab-content {
        border: 1px solid #E3E3E3;
        border-radius: 0px 0px 4px 4px;
        border-top: none;
        padding: 2px;
    }

    .table [valign="top"] {
        vertical-align: top;
    }

    #newOrder div[id^=m] {
        background-color: #FFFFFF;
        border: 1px solid #E3E3E3;
        border-radius: 4px;
        margin: 2px;
        padding: 2px;
        line-height: 25px;
        float: left;
        min-height: 30px;
        width: 99%;
    }

    .title {
        width: 60px;
        margin-left: 20px;
    }

    table {
        width: 100%;
    }

    #sumTotal td {
        border-left: none;
        border-bottom: none;
        border-right: none;
        padding-left: 15px;
    }
</style>
<ul class="nav nav-tabs tab tBlock">
    <li class="active"><a title="新增订单" deny="not" class="nFocus" href="#newOrder" data-toggle="tab"> <i
            class="icon-heart"></i> 我要下单
    </a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="newOrder">
        <form id="inputForm" class="form-inline" action="${ctx}/adoms/order/order" method="post">
            <input type="hidden" name="id" value="${order.id}"/>
            <table class="table table-striped table-bordered table-condensed">
                <tr class="hide">
                    <td class="span2">订单名称:</td>
                    <td>
                        <input id="name" class="span4" name="name" type="text" value="${order.name}" size="30"
                               maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td class="span2">发货部门:</td>
                    <td>
                        <select id="departmentTarget" name="departmentTarget.id" style="width: auto; min-width: 200px;">
                            <option value="" id="dPlz">请选择...</option>
                            <c:forEach items="${dList }" var="d" varStatus="index">
                                <option value="${d.id }">${index.index + 1}.${d.name }</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="span2">订购商品:</td>
                    <td>
                        <select id="marchandise" name="marchandise.id" style="width: auto; min-width: 200px;">
                            <option value="0" id="plz">请选择...</option>
                            <c:forEach items="${mList }" var="m" varStatus="index">
                                <option value="${m.id }">${index.index + 1}.${m.name }</option>
                            </c:forEach>
                        </select>
                        (可选择多个商品)
                    </td>
                </tr>
                <tr>
                    <td class="span2" valign="top">商品订购详情:</td>
                    <td>
                        <div id="eyeInfo" style="width: 100%;">
                            <table id="mmmm" minfo class="table-striped table-bordered table-condensed"
                                   style="margin: auto; width: 100%;">
                                <tr>
                                    <th>商品名称</th>
                                    <th>单价(元)</th>
                                    <th>规格</th>
                                    <th>件数</th>
                                    <th>每件数量</th>
                                    <th>数量</th>
                                    <th>总价(元)</th>
                                    <th>操作</th>
                                </tr>
                                <c:forEach items="${mList }" var="m" varStatus="index">
                                    <tr disable="disable" class="hide" id="m${m.id }">
                                        <td>
                                                ${index.index + 1}.${m.name }
                                            <input type="hidden" name="marchandise.id" value="${m.id }">
                                        </td>
                                        <td>
                                            <span class="tRed" name="mPrice">${m.price }/${m.packageing }</span>
                                        </td>
                                        <td>
                                            <span>${m.spcification }</span>
                                        </td>
                                        <td>
                                            <input name="boxNum" maxlength="8" value="0" type="text" class="tRed span1">
                                            (件)
                                        </td>
                                        <td>
                                            <span name="numOfBox">${m.numOfBox }</span>
                                                ${m.packageing }
                                        </td>
                                        <td>
                                            <input name="items" maxlength="8" value="0" type="text" class="tRed span1">
                                            (${m.packageing })
                                        </td>
                                        <td>
                                            <input name="totalPrice" type="text" value="0.0" readonly="readonly"
                                                   style="width: auto; cursor: auto; border: none; background: #FFFFFF; box-shadow: none;">
                                        </td>
                                        <td>
                                            <a class="rclose" value="${m.id }" to="#m${m.id }" title="删除商品" href="#"> <i
                                                    class=" icon-remove"></i> 删除
                                            </a>
                                        </td>
                                    </tr>
                                </c:forEach>
                                <tr id="sumTotal">
                                    <td>合 计</td>
                                    <td></td>
                                    <td></td>
                                    <td id="availableTotalBox">0.00</td>
                                    <td></td>
                                    <td id="availableTotalItems">0</td>
                                    <td id="availableTotalPrice">0.00</td>
                                    <td></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr class="hide">
                    <td>商品单价:</td>
                    <td class="tBlue">
                        ￥
                        <span id="mPrice" class="tRed">0.00</span>
                        (元)
                    </td>
                </tr>
                <tr>
                    <td>总数量:</td>
                    <td>
                        <input style="width: auto; cursor: auto; border: none; background: #FFFFFF; box-shadow: none;"
                               id="goodsNumber" name="goodsNumber" readonly="readonly" type="text" value="0" size="30"
                               maxlength="50"/>
                    </td>
                </tr>
                <tr>
                    <td>总价:</td>
                    <td>
                        <input style="width: auto; cursor: auto; border: none; background: #FFFFFF; box-shadow: none;"
                               id="totalCost" readonly="readonly" class="span2" name="totalCost" type="text"
                               value="0.00"
                               size="30" maxlength="50"/>
                        (元)
                    </td>
                </tr>
                <tr>
                    <td>联系电话:</td>
                    <td>
                        <input id="phone" name="phone" type="text" value="${order.phone}" size="30" maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td>收货部门:</td>
                    <td>
                        <select class="tBlue" id="department" name="department.id">
                            <option value="${USER.department.id}">${USER.department.name}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>联系人:</td>
                    <td>
                        <span class="tBlue">${USER.name }</span>
                        <input id="createUser" name="createUser" type="hidden" value="${USER.name }" size="30"
                               maxlength="80"/>
                    </td>
                </tr>
                <tr>
                    <td valign="top">备注:</td>
                    <td>
                        <textarea id="memo" name="memo" rows="3" class="span6">${order.memo}</textarea>
                    </td>
                </tr>
                <tr>
                    <td align="center" class="text-center" colspan="2">
                        <a id="myOrder" class="hide" href="${ctx }/adoms/order/myOrderList">我的订单</a>
                        <input id="submitBtn" class="btn span2 btn-primary" disabled="disabled" type="button"
                               value="提交订单"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules: {
                totalCost: {
                    required: true,
                    number: true
                },
                phone: "required",
                receivedTime: "required",
                //name : "required",
                orderChargeUser: "required",
                orderCreateTime: "required",
                status: "required",
                "department.id": "required",
                "departmentTarget.id": "required",
                createUser: "required",
                goodsNumber: {
                    required: true,
                    number: true
                }
            }
        });
        //展示商品详情
        $("#idShow").toggle(function () {
            $("#eyeInfo").show("slow");
            $(this).html("隐藏商品详情");
            $(".icon-eye-open").attr("class", "icon-eye-close");
        }, function () {
            $(".icon-eye-close").attr("class", "icon-eye-open");
            $(this).html("显示商品详情");
            $("#eyeInfo").hide("slow");
        });
        //
        $("#marchandise").change(function () {
            try {
                var mid = $(this).val();
                if (mid) {
                    $("option[value=" + mid + "]", this).hide();
                    $("div", $("#m" + mid)).hide(); //隐藏已经选择的项
                    $("#m" + mid).show("slow").attr("disable", "false");
                    $("#mPrice").html($("[mPrice]", $("#m" + mid)).html());
                    $("#goodsNumber").keyup();
                }
                //$("#plz").remove();
                //$("#plz").attr("selected", "selected");
            } catch (e) {
            }
        });
        $("#departmentTarget").change(function () {
            $("#dPlz").remove();
        });
        $("a.rclose").click(function () {
            var taget = $($(this).attr("to"));
            taget.hide("slow").attr("disable", "disable");
            clearHistory(taget);
            //显示下拉框的商品选项
            var optionValue = $(this).attr("value");
            $("#marchandise option[value=" + optionValue + "]").show();
            countNum();
            return false;
        });
        $("a.exspan").toggle(function () {
            var taget = $($(this).attr("to"));
            $("div", taget).show("slow");
            return false;
        }, function () {
            var taget = $($(this).attr("to"));
            $("div", taget).hide("slow");
            return false;
        });
        $("div[id^=m]").each(function () {
            var _self = $(this);
            $("input[name=boxNum],input[name=items]", _self).keyup(function () {
                var boxNum = parseInt($("input[name=boxNum]", _self).val());
                var items = parseInt($("input[name=items]", _self).val());
                var numOfBox = parseInt($("[name=numOfBox]", _self).html());
                countNum();
            });
        });
        $("#submitBtn").mousedown(function () {
            var len = $("[disable=false]").length;
            if (len == 0) {
                return false;
            }
            var result = 0;
            //先清理Session中的值
            $.post("${ctx}/adoms/orderLine/clearOlines", function (data) {
                $("[disable=false]").each(function () {
                    var form = $("<form></form>");
                    var parent = $(this).parent();
                    form.append($(this));
                    $.post("${ctx}/adoms/orderLine/addOlines", form.serialize(), function (data) {
                        if (data > 0) {
                            result++;
                            if (result == len) {
                                $("#inputForm").submit();
                            }
                        } else {
                            msgAlert.show("商品订购数量不能为零!");
                            return false;
                        }
                    }, 'json');
                    parent.prepend($(this));
                });
            }, 'json');
            return false;
        });
        //分行计数设置数量和总价
        $("#mmmm tr").each(function () {
            var _self = $(this);
            $("[name=boxNum]", _self).on("blur keyup", function () {
                try {
                    var boxNum = parseFloat($(this).val());
                    var numOfBox = parseInt($("[name=numOfBox]", _self).html());
                    if (isNaN(boxNum)) {
                        boxNum = 0;
                        $(this).val(0);
                    } else if (isNaN(numOfBox)) {
                        numOfBox = 0;
                    }
                    $("[name=items]", _self).val((boxNum * numOfBox).toFixed(0));
                    var items = parseInt($("[name=items]", _self).val());
                    var mPrice = parseFloat($("[name=mPrice]", _self).text());
                    if (isNaN(items)) {
                        items = 0;
                    } else if (isNaN(mPrice)) {
                        mPrice = 0;
                    }
                    $("[name=totalPrice]", _self).val((mPrice * items).toFixed(2));
                } catch (e) {
                    $("[name=items]", _self).val(0);
                    $("[name=totalPrice]", _self).html(0);
                }
                countTotal();
            });
            $("[name=items]", _self).on("blur keyup", function () {
                try {
                    var items = parseInt($(this).val());
                    var numOfBox = parseInt($("[name=numOfBox]", _self).html());
                    var mPrice = parseFloat($("[name=mPrice]", _self).text());
                    if (isNaN(numOfBox)) {
                        numOfBox = 0;
                    } else if (isNaN(items)) {
                        items = 0;
                        $(this).val(0);
                    } else if (isNaN(mPrice)) {
                        mPrice = 0;
                    }
                    $("[name=totalPrice]", _self).val((mPrice * items).toFixed(2));
                    $("[name=boxNum]", _self).val((items / numOfBox).toFixed(2));
                } catch (e) {
                    $("[name=totalPrice]", _self).html(0);
                    $("[name=boxNum]", _self).val(0);
                }
                countTotal();
            });
        });
    });
    function clearHistory(oBject) {
        $("input:text", oBject).val(0);
        $("input[name=totalPrice]", oBject).val("0.0");
        $("#marchandise #plz").attr("selected", "selected");
        //$("#marchandise").val("请选择...");
    }
    function countNum() {
        var prices = $("[disable=false] input[name=totalPrice]");
        var price = 0.0;
        $.each(prices, function (i, item) {
            price += parseFloat($(item).val());
        });
        $("#totalCost").val(price.toFixed(2));
        $(":button").removeAttr("disabled");
        countTotal();
    }
    //统计并计算总价
    function countTotal() {
        var boxNums = 0;
        var items = 0;
        var prices = 0;
        $('tr[disable=false]').each(function () {
            boxNums += parseFloat($("[name=boxNum]", this).val());
            items += parseInt($("[name=items]", this).val());
            prices += parseFloat($("[name=totalPrice]", this).val());
        });
        $("#availableTotalBox").html(boxNums.toFixed(2));
        $("#availableTotalItems").html(items);
        $("#availableTotalPrice").html(prices.toFixed(2));
        $("#totalCost").val(prices.toFixed(2));
        $("#goodsNumber").val(items);
        $(":button").removeAttr("disabled");
    }
</script>
<c:if test="${msg != null}">
    <script>
        $(function () {
            msgAlert.show("${msg}");
            location.href = "${ctx}/adoms/order/myOrderList?compositorType=DESC&fieldName=orderCreateTime";
        });
    </script>
</c:if>
</body>
</html>